
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>FusionCharts v3 Documentation</title>
<link rel="stylesheet" href="Style.css" type="text/css" />
</head>

<body>
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
  <tr> 
    <td><h2 class="pageHeader">Combining FusionCharts, RoR - JavaScript (dataXML) method </h2></td>
  </tr>
  <tr> 
    <td valign="top" class="text"><p>In our previous example, we had combined FusionCharts, Ruby and JavaScript to create client side dynamic charts. We were updating the chart by asking it to fetch new data from server and update itself, without incurring any page refreshes. </p>
      <p>In this example, <strong>instead of asking the chart to get XML data </strong>from server, <strong>we'll provide updated XML data to chart using JavaScript </strong>functions. The chart will simply accept that XML data and render. </p>
      <p class="highlightBlock">This method can effectively be used in your AJAX applications, where your JavaScript code gets the updated XML from server and then provides it to charts locally. You can process the data received from AJAX Calls, build XML from it and finally provide it to the chart. </p>
      <p><strong>Before you proceed with the contents in this page, we strictly recommend you to please go through the sections &quot;How FusionCharts works?&quot; and &quot;Basic Examples&quot;, as we'll directly use a lot of concepts defined in those sections.</strong></p>
     </td>
  </tr>
  <tr>
    <td valign="top" class="highlightBlock">All code discussed here is present in <br><span class="codeInline">Controller : Download Package > Code > RoR > app > controllers > db_js_controller.rb</span>. <br> <span class="codeInline">Rhtml : Download Package > Code > RoR > app > views > db_js</span> folder. </td>
  </tr>
  <tr>
    <td valign="top" class="text">&nbsp;</td>
  </tr>
  <tr>
    <td valign="top" class="header">Defining the applicaton </td>
  </tr>
  <tr>
    <td valign="top" class="text"><p>We'll carry on from our previous <span class="codeInline">&quot;Ruby, JavaScript and dataURL</span>&quot; example and convert it to use JavaScript + XML, so that the new XML is provided to the chart using JavaScript functions - the charts NO more directly request data from server. To attain this, we send all the pertinent data from our server to the end viewer as JavaScript arrays in the same page. The JavaScript arrays are dynamically generated by Ruby pages at run-time and filled with data. </p>
      <p>Effectively, we will do the following:</p>
      <ol>
      <li>Contain both the pie chart (summary) and column chart (detailed) in one page (<span class="codeInline">Default</span>).</li>
      <li>When the page loads, the pie chart would use <span class="codeInline">dataXML</span> method to show summary  of all factories. This data will be built in <span class="codeInline">default</span> itself. </li>
      <li>There will be a JavaScript array named as <span class="codeInline">data</span> in this page. This array will contain detailed data for the factories. The array will be dynamically built using Ruby and then outputted as JavaScript code. </li>
      <li>Apart from the data in JavaScript, we'll also have a local JavaScript function <span class="codeInline">updateChart()</span>, which would process the data in this array and convert it to XML data document, for direct usage by the column chart. </li>
      <li>The column chart would initialize with no data, as the user has not selected a factory initially. We'll customize the &quot;<span class="codeInline">No data to display</span>&quot; message of the chart to show a friendly message.</li>
      <li>The pie chart would have JavaScript links defined for each pie slice. This JavaScript links refer to <span class="codeInline">updateChart()</span> JavaScript function present on the same page. We'll later see how to hand code this function. When a pie is clicked, the <span class="codeInline">factory ID </span>is passed to this function. </li>
      <li>The <span class="codeInline">  updateChart()</span> function is responsible for udapting the column chart. It generates the XML data from data stored in JavaScript <span class="codeInline">data</span> array and conveys it to the column chart.</li>
      <li>The column chart would now accept this XML data,  parse it and finally render.</li>
      </ol>    </td>
  </tr>
  <tr>
    <td valign="top" class="text">&nbsp;</td>
  </tr>
  <tr>
    <td valign="top" class="header">Creating the page </td>
  </tr>
  <tr>
    <td valign="top" class="text">Both the charts and JavaScript functions to manipulate the charts  has the following code: </td>
  </tr>
  <tr>
    <td valign="top" class="codeBlock"><p><br />
   <b>Controller: db_js_controller.rb <br>  Action: index</b><br>
    	class DbjsController < ApplicationController<br>
&nbsp;def index<br>
&nbsp;&nbsp;&nbsp;@jsVarString1 = ""<br>
&nbsp;&nbsp;<span class="codeComment">&nbsp;#Database Objects oRs, oRs2, strQuery, indexCount</span><br>
&nbsp;&nbsp;&nbsp;indexCount = 0<br>
&nbsp;&nbsp;&nbsp;oRs = Factorymaster.find(:all)<br>
&nbsp;&nbsp;&nbsp;oRs.each do |recordset1|<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;indexCount = indexCount + 1
<span class="codeComment"><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#Create JavaScript code to add sub-array to data array<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#data is an array defined in JavaScript (see below)<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#We've added \t + \n to data so that if you View Source of the<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#output HTML, it will appear properly. It helps during debugging</span><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;@jsVarString1 = @jsVarString1 + "\t \t"+  "data[" + indexCount.to_s + "] = new Array();" + "\n"<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;oRs2 = Factoryoutput.find(:all,:conditions=>["FactoryId=?",recordset1.FactoryId.to_s], :order => 'DatePro ASC')<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;oRs2.each do |recordset2|<br>
&nbsp;&nbsp;&nbsp;<span class="codeComment">&nbsp;&nbsp;&nbsp;&nbsp;#Put this data into JavaScript as another nested array.<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#Finally the array would look like data[factoryIndex][i][dataLabel,dataValue] </span><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;@jsVarString1 = @jsVarString1 + "\t \t"  +   "data[" + indexCount.to_s + "].push(new Array('" + recordset2.DatePro.strftime('%d') 
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ "/" + recordset2.DatePro.strftime('%m') + "'," + recordset2.Quantity.to_s + "));" + "\n"<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;end<br>
&nbsp;&nbsp;&nbsp;end<br>
<span class="codeComment">&nbsp;&nbsp;&nbsp;#Initialize the Pie chart with sum of production for each of the factories<br>
&nbsp;&nbsp;&nbsp;#strXML will be used to store the entire XML document generated</span><br>
&nbsp;&nbsp;&nbsp;strXML =''<br>
&nbsp;&nbsp;&nbsp;<span class="codeComment">#Re-initialize Index</span><br>
&nbsp;&nbsp;&nbsp;indexCount=0<br>
&nbsp;&nbsp;&nbsp;<span class="codeComment">#Generate the chart element</span><br>
&nbsp;&nbsp;&nbsp;strXML = "&lt;chart caption='Factory Output report' subCaption='By Quantity'  &nbsp;&nbsp;&nbsp;pieSliceDepth='30' showBorder='1' 
	 &nbsp;&nbsp;&nbsp;formatNumberScale='0' numberSuffix=' Units' &gt;"<br>
&nbsp;&nbsp;&nbsp;<span class="codeComment">#Move back to first index of the factory master recordset</span><br>
&nbsp;&nbsp;&nbsp;oRs.each do |recordset1|<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="codeComment">#Update index count - sequential</span><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;indexCount = indexCount + 1<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;@oRs2 = Factoryoutput.find(:all,:conditions=>["FactoryId=?",recordset1.FactoryId.to_s])<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;recordcount = @oRs2.length<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;count = 0<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;quantity = 0<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;while count < recordcount<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;quantity = quantity + @oRs2[count][:Quantity].to_i<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;count = count + 1<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;end<br>
&nbsp;&nbsp;&nbsp;<span class="codeComment">&nbsp;&nbsp;#puts quantity<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#Generate &lt;set label='..' value='..'/&gt;	</span><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;factoryid = ""<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;@oRs2.each do |recordset2|<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if factoryid != recordset2.FactoryId<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>&nbsp;&nbsp;strXML = strXML + "&lt;set label='" + recordset1.FactoryName + "' value='" + quantity.to_s + "' link='javaScript:updateChart(" +  indexCount.to_s + ")'/&gt;"</strong><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;end<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;factoryid = recordset2.FactoryId&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;end<br>
&nbsp;&nbsp;&nbsp;end<br>
&nbsp;&nbsp;&nbsp;<span class="codeComment">#Finally, close &lt;chart&gt; element</span><br>
&nbsp;&nbsp;&nbsp;strXML = strXML + "&lt;/chart&gt;"<br>
&nbsp;&nbsp;<span class="codeComment">&nbsp;#Create the chart - Pie 3D Chart with data from strXML</span><br>
&nbsp;&nbsp;&nbsp;<strong>@chart1= renderChart("/FusionCharts/Pie3D.swf", "", strXML, "FactorySum", 500, 250, false, false)<br>
&nbsp;&nbsp;&nbsp;@chart2=renderChart("/FusionCharts/Column2D.swf?ChartNoDataText=Please select a factory from pie chart above to view detailed data.", "", "&lt;chart&gt;&lt;/chart&gt;", "FactoryDetailed", 600, 250, false, false)</strong><br>
&nbsp;end<br>
  end</p>
      <p><font color="blue"><br>
            </font>
        <b>View:</b><br>
        &lt;HTML&gt;<br />
  &nbsp;&lt;HEAD&gt;<br />
  &nbsp;&nbsp;&lt;TITLE&gt;FusionCharts - Form Based Data Charting Example&lt;/TITLE&gt;<br />
  &nbsp;&nbsp;&lt;SCRIPT LANGUAGE=&quot;Javascript&quot; SRC=&quot;/FusionCharts/FusionCharts.js&quot;&gt;
  &nbsp;&nbsp;&nbsp;<br/>
  &nbsp;&nbsp;&lt;/SCRIPT&gt;<br />
  &nbsp;&nbsp;&lt;SCRIPT LANGUAGE=&quot;Javascript&quot; &gt;<br />
  &nbsp;&nbsp;&nbsp;	<span class="codeComment">//Here, we use a mix of server side script (Ruby) and JavaScript to<br />
&nbsp;&nbsp;&nbsp;	//render our data for factory chart in JavaScript variables. We'll later<br />
&nbsp;&nbsp;&nbsp;	//utilize this data to dynamically plot charts.<br />
&nbsp;&nbsp;&nbsp;	//All our data is stored in the data array. From Ruby, we iterate through<br />
&nbsp;&nbsp;&nbsp;	//each recordset of data and then store it as nested arrays in this data array.</span><br />
  &nbsp;&nbsp;&nbsp;	var data = new Array();<br />
  &nbsp;&nbsp;&nbsp;	&lt;%= @jsVarString1%&gt;<br />
  &nbsp;&nbsp;&nbsp;	<span class="codeComment">&lt;%<br />
&nbsp;&nbsp;&nbsp;	#The data is now present as arrays in JavaScript. Local JavaScript functions<br />
&nbsp;&nbsp;&nbsp;	#can access it and make use of it. We'll see how to make use of it.<br />
&nbsp;&nbsp;&nbsp;	%&gt;<br />
&nbsp;&nbsp;&nbsp; /** <br />
&nbsp;&nbsp;&nbsp;	 * updateChart method is invoked when the user clicks on a pie slice.<br />
&nbsp;&nbsp;&nbsp;	 * In this method, we get the index of the factory, build the XML data<br />
&nbsp;&nbsp;&nbsp;	 * for that that factory, using data stored in data array, and finally<br />
&nbsp;&nbsp;&nbsp; * update the Column Chart.<br />
&nbsp;&nbsp;&nbsp;	 *	@param	factoryIndex	Sequential Index of the factory.<br />
&nbsp;&nbsp;&nbsp;	*/		
        &nbsp;&nbsp;&nbsp;</span><br>
        &nbsp;&nbsp;&nbsp;&nbsp;function updateChart(factoryIndex){<br />
  &nbsp;&nbsp;&nbsp;		&nbsp;&nbsp;<span class="codeComment">//Storage for XML data document</span><br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;		var strXML = "&lt;chart palette='2' caption='Factory " + factoryIndex  + " Output ' subcaption='(In Units)' xAxisName='Date' showValues='1' labelStep='2' &gt;";<br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="codeComment"> //Add &lt;set&gt; elements</span><br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;		var i=0;<br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;		for (i=0; i< data[factoryIndex].length; i++){<br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;			strXML = strXML + "&lt;set label='" + data[factoryIndex][i][0] + "' value='" + data[factoryIndex][i][1] + "' /&gt;";<br />
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;		}			<br />
  &nbsp;&nbsp;&nbsp;		<span class="codeComment">//Closing Chart Element</span><br />
  &nbsp;&nbsp;&nbsp;		strXML = strXML + "&lt;/chart&gt;";<br />
  &nbsp;&nbsp;&nbsp;<span class="codeComment"> //Get reference to chart object using Dom ID "FactoryDetailed"</span><br />
  &nbsp;&nbsp;&nbsp;		var chartObj = getChartFromId("FactoryDetailed");<br />
  &nbsp;&nbsp;&nbsp;<span class="codeComment">		//Update it's XML</span><br />
  &nbsp;&nbsp;&nbsp;		chartObj.setDataXML(strXML);<br />
  &nbsp;&nbsp;&nbsp;	}<br />
  &nbsp;&nbsp; &lt;/SCRIPT&gt;<br />
  &nbsp;&nbsp;&lt;style type="text/css"&gt;
  &nbsp;<br />
  &nbsp;&lt;/HEAD&gt;<br />
  &nbsp;&lt;BODY&gt;
  &nbsp;&nbsp;<br />
  <strong>&nbsp;&nbsp;&nbsp;&lt;%= @chart1%&gt;</strong><br />
  &nbsp;&nbsp;&nbsp;&lt;%<br />
  <span class="codeComment">&nbsp;&nbsp;&nbsp;	#Column 2D Chart with changed "No data to display" message<br />
&nbsp;&nbsp;&nbsp;	#We initialize the chart with &lt;chart&gt;&lt;/chart&gt;%&gt;<br />
  <strong></strong></span><strong>&nbsp;&nbsp;&nbsp;&lt;%= @chart2%&gt;</strong>
  <br />
  &nbsp;&lt;/BODY&gt;<br />
  &lt;/HTML&gt;</p></td><tr>
    <td valign="top" class="text"><p>In this page, before rendering any HTML code, we first generate all the data in database as JavaScript array. To do so, we use string concatenation in Ruby variables to store all data as JavaScript array code. Once the JavaScript code is built in our Ruby variable, we write it out in the <span class="codeInline">&lt;SCRIPT&gt;</span> section of HTML <span class="codeInline">&lt;HEAD&gt;</span>. </p>
      <p class="codeInline">&lt;SCRIPT LANGUAGE=&quot;JavaScript&quot;&gt;<br />
      &nbsp;&nbsp;var data = new Array();<br />
      &nbsp;&nbsp;&nbsp;&nbsp;&lt;%= @jsVarString1%&gt;<br />
&lt;/SCRIPT&gt;</p>
    <p>If you run this page and view the source JavaScript code, you'll see the following: </p></td>
  </tr>
  <tr>
    <td valign="top" class="codeBlock">var data = new Array();<br />
      <br />
data[1] = new Array();<br />
data[1].push(new Array('1/1',21));<br />
data[1].push(new Array('2/1',23));<br />
data[1].push(new Array('3/1',22));<br />
data[1].push(new Array('4/1',24));<br />
data[1].push(new Array('5/1',32));<br />
data[1].push(new Array('6/1',21));<br />
data[1].push(new Array('7/1',34));<br />
data[1].push(new Array('8/1',32));<br />
data[1].push(new Array('9/1',32));<br />
data[1].push(new Array('10/1',23));<br />
data[1].push(new Array('11/1',23));<br />
data[1].push(new Array('12/1',32));<br />
data[1].push(new Array('13/1',53));<br />
data[1].push(new Array('14/1',23));<br />
data[1].push(new Array('15/1',26));<br />
data[1].push(new Array('16/1',43));<br />
data[1].push(new Array('17/1',16));<br />
data[1].push(new Array('18/1',45));<br />
data[1].push(new Array('19/1',65));<br />
data[1].push(new Array('20/1',54));<br />
data[2] = new Array();<br />
data[2].push(new Array('1/1',121));<br />
data[2].push(new Array('2/1',123));<br />
data[2].push(new Array('3/1',122));<br />
data[2].push(new Array('4/1',124));<br />
data[2].push(new Array('5/1',132));<br />
data[2].push(new Array('6/1',121));<br />
data[2].push(new Array('7/1',134));<br />
data[2].push(new Array('8/1',132));<br />
data[2].push(new Array('9/1',132));<br />
data[2].push(new Array('10/1',123));<br />
data[2].push(new Array('11/1',123));<br />
data[2].push(new Array('12/1',132));<br />
data[2].push(new Array('13/1',153));<br />
data[2].push(new Array('14/1',123));<br />
data[2].push(new Array('15/1',126));<br />
data[2].push(new Array('16/1',143));<br />
data[2].push(new Array('17/1',116));<br />
data[2].push(new Array('18/1',145));<br />
data[2].push(new Array('19/1',165));<br />
data[2].push(new Array('20/1',154));<br />
data[3] = new Array();<br />
data[3].push(new Array('1/1',54));<br />
data[3].push(new Array('2/1',56));<br />
data[3].push(new Array('3/1',89));<br />
data[3].push(new Array('4/1',56));<br />
data[3].push(new Array('5/1',98));<br />
data[3].push(new Array('6/1',76));<br />
data[3].push(new Array('7/1',65));<br />
data[3].push(new Array('8/1',45));<br />
data[3].push(new Array('9/1',75));<br />
data[3].push(new Array('10/1',54));<br />
data[3].push(new Array('11/1',75));<br />
data[3].push(new Array('12/1',76));<br />
data[3].push(new Array('13/1',34));<br />
data[3].push(new Array('14/1',97));<br />
data[3].push(new Array('15/1',55));<br />
data[3].push(new Array('16/1',43));<br />
data[3].push(new Array('17/1',16));<br />
data[3].push(new Array('18/1',35));<br />
data[3].push(new Array('19/1',78));<br />
data[3].push(new Array('20/1',75));</td>
  </tr>
  <tr>
    <td valign="top" class="text"><p>You can clearly see that our code has outputted JavaScript code that can now locally create an array and feed it with requisite data. </p>
      <p>Now, before we get to the JavaScript functions, let's first see what we're doing in our Code. </p>
      <p>We first create the XML data document for Pie chart - summary of factory output. For each <span class="codeInline">&lt;set&gt;</span>, we provide a JavaScript link to the <span class="codeInline">updateChart()</span> function and pass the factory ID to it as shown in the line below:</p>
    <p class="codeInline">&nbsp;strXML = strXML + "&lt;set label='" + recordset1.FactoryName + "' value='" + quantity.to_s + "' link='javaScript:updateChart(" +  indexCount.to_s + ")'/&gt;"</p>
    <p class="text">      We now render the Pie 3D chart using dataXML method. The Pie 3D chart has its DOM Id as <span class="codeInline">FactorySum</span>:</p>
    <p class="codeInline">@chart1= renderChart(&quot;/FusionCharts/Pie3D.swf&quot;, &quot;&quot;, <strong>strXML</strong>, &quot;<strong>FactorySum</strong>&quot;, 500, 250, false, false)</p>
    <p>Now, we render an empty Column 2D chart  with <span class="codeInline">&lt;chart&gt;&lt;/chart&gt;</span> data initially. We also change the &quot;<span class="codeInline">No data to display.</span>&quot; error to a friendly and intuitive &quot;<span class="codeInline">Please select a factory from pie chart above to view detailed data.</span>&quot; This chart has its DOM Id as <span class="codeInline">FactoryDetailed</span>.</p>
    <p><span class="codeInline">@chart2= renderChart(&quot;/FusionCharts/Column2D.swf?<strong>ChartNoDataText=Please select a factory from pie chart above to view detailed data.</strong>&quot;, &quot;&quot;, &quot;<strong>&lt;chart&gt;&lt;/chart&gt;</strong>&quot;, &quot;<strong>FactoryDetailed</strong>&quot;, 600, 250, false, false)</span></p>
    <p>Effectively, our page is now  set to show two charts. The pie chart shows the summary data provided to it using dataXML method. The column chart shows the above &quot;friendly&quot; error message. Now, when each pie slice is clicked, the <span class="codeInline">updateChart()</span> JavaScript function is called and the <span class="codeInline">factoryID</span> of the pie is passed to it. This function is responsible for updating the column chart and contains the following code: </p></td>
  </tr>
  <tr>
    <td valign="top" class="codeBlock">function updateChart(factoryIndex){<br />      &nbsp;&nbsp;<span class="codeComment">&nbsp;&nbsp;//Storage for XML data document</span><br />      &nbsp;&nbsp;&nbsp;&nbsp;var strXML = &quot;&lt;chart palette='2' caption='Factory &quot; + factoryIndex  + &quot; Output ' subcaption='(In Units)' xAxisName='Date' showValues='1' labelStep='2' &gt;&quot;;<br />
<br /><span class="codeComment">&nbsp;&nbsp;&nbsp;//Add &lt;set&gt; elements</span><br />&nbsp;&nbsp;&nbsp;var i=0;<br />&nbsp;&nbsp;&nbsp;for (i=0; i&lt;data[factoryIndex].length; i++){<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;strXML = strXML + &quot;&lt;set label='&quot; + data[factoryIndex][i][0] + &quot;' value='&quot; + data[factoryIndex][i][1] + &quot;' /&gt;&quot;;<br />&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;<br />
<br />&nbsp;&nbsp;<span class="codeComment">&nbsp;//Closing Chart Element</span><br />&nbsp;&nbsp;&nbsp;strXML = strXML + &quot;&lt;/chart&gt;&quot;;<br />
<br /><span class="codeComment">&nbsp;&nbsp;&nbsp;//Get reference to chart object using Dom ID &quot;FactoryDetailed&quot;</span><br />&nbsp;&nbsp;&nbsp;var chartObj = getChartFromId(&quot;FactoryDetailed&quot;);<br /><span class="codeComment">&nbsp;&nbsp;&nbsp;//Update it's XML</span><br />&nbsp;&nbsp;&nbsp;chartObj.setDataXML(strXML);<br />
&nbsp;&nbsp;&nbsp;}</td>
  </tr>
  <tr>
    <td valign="top" class="text"><p>Here, </p>
      <ol>
        <li>We first create the XML data document for the column chart by iterating through data contained in our JavaScript <span class="codeInline">data</span> array. </li>
        <li>Thereafter, we convery this XML data to the column chart. To do so, we first get a reference to the column chart using it's DOM Id <span class="codeInline">FactoryDetailed</span>. We use the <span class="codeInline">getChartFromId</span>() function defined in <span class="codeInline">FusionCharts.js</span> to do so. </li>
        <li>Once we've the reference to the chart, we simply call the <span class="codeInline">setDataXML</span> method of the chart and pass it the XML data document. </li>
        <li>This updates the chart with new data. </li>
      </ol>    
    <p>When you now see the application, the initial state would look as under: </p></td>
  </tr>
  <tr>
    <td valign="top" class="text"><img src="Images/Code_JS_URL_Ini.jpg" width="511" height="458" class="imageBorder" /></td>
  </tr>
  <tr>
    <td valign="top" class="text">And when you click on a pie slice, the following would appear on the same page (without involving any browser refreshes): </td>
  </tr>
  <tr>
    <td valign="top" class="text"><img src="Images/Code_JS_URL_Fin.jpg" width="610" height="526" /></td>
  </tr>
  <tr>
    <td valign="top" class="text">This example demonstrated a very basic sample of the integration capabilities possible with FusionCharts v3. For advanced demos, you can see and download our FusionCharts Blueprint/Demo Applications. </td>
  </tr>
</table>
</body>
</html>
